<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智慧社区后台</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/AdminLTE.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-table/css/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/jquery-treegrid/css/jquery.treegrid.min.css">
</head>
<style>
</style>
<body style="padding-bottom: 90px; background-color: #ECF0F5;">
	<section class="content" style="margin: 15px; background-color: white;">
		<div class="row">
			<div class="col-sm-12">
				<table id="table">
					<thead style="background-color: #00C0EF">
						<tr style="background-color: #00C0EF">
							<th class="text-center" data-field="num">号码</th>
							<th class="text-center" data-field="content">标题</th>
							<th class="text-center" data-field="createTime">创建时间</th>
							<th class="text-center" data-field="id">操作</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
	</section>
</body>
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-export.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-toolbar.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-filter-control.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/tableExport.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-treegrid.js"></script>
<script src="${pageContext.request.contextPath}/plugins/jquery-treegrid/js/jquery.treegrid.min.js"></script>
<!-- layer -->
<script src="${pageContext.request.contextPath}/plugins/layer/2.4/layer.js"></script>
<script src="${pageContext.request.contextPath}/js/date.js"></script>
<script>
	function actionFormatter(value, row, index) {
		var edit = "<button class='btn btn-primary btn-xs glyphicon glyphicon-pencil' onclick='showModal(\"" + row.id + "\",\"" + row.pId + "\");'>编辑</button>";
		var del = "<button class='btn btn-danger btn-xs like' onclick='del(\"" + row.id + "\");'>删除</button>";
		var add = "<button class='btn btn-primary btn-xs glyphicon glyphicon-plus' onclick='showModal(\"" + '' + "\",\"" + row.id + "\");'>新增下一级</button>";
		// 		if (row.isFinal == 0) {
		return [ add + "&nbsp;" + edit + "&nbsp;" + del ];
		// 		} else {
		// 			return [ edit + "&nbsp;" + del ];
		// 		}
	}

	var table_dataset = [ {
		field : 'num',
		align : 'center',
	}, {
		field : 'content',
		align : 'center',
	}, {
		field : 'createTime',
		align : 'center',
		formatter : function formatter(value, row, index) {
			return (new Date(row.createTime)).Format("yyyy-MM-dd hh:mm:ss");
		},
	}, {
		align : 'center',
		width : 300,
		formatter : actionFormatter,
	} ];
	var $table = $("#table");
	$table.bootstrapTable({
		url : "${pageContext.request.contextPath}/selectPropertyResources",
		idField : "id",
		method : 'post',
		columns : table_dataset,
		striped : true, //是否显示行间隔色
		showRefresh : true,
		sidePagination : "server", //表示服务端请求  
		toolbar : "<button class='btn btn-primary glyphicon glyphicon-plus' onclick='showModal(\"" + '' + "\",0);'>新增数据</button>",
		icons : {
			paginationSwitchDown : 'glyphicon-collapse-down icon-chevron-down',
			paginationSwitchUp : 'glyphicon-collapse-up icon-chevron-up',
			refresh : 'glyphicon-refresh icon-refresh',
			toggle : 'glyphicon-list-alt icon-list-alt',
			columns : 'glyphicon-th icon-th',
			detailOpen : 'glyphicon-plus icon-plus',
			detailClose : 'glyphicon-minus icon-minus',
			"export" : 'glyphicon-export icon-share'
		},
		showExport : true,
		exportDataType : 'basic',
		exportTypes : [ 'json', 'xml', 'csv', 'txt', 'sql', 'excel' ],
		treeShowField : 'content',
		parentIdField : 'pId',
		onLoadSuccess : function(data) {
			$table.treegrid({
				initialState : 'expanded',//收缩
				treeColumn : 1,//指明第几列数据改为树形
				expanderExpandedClass : 'glyphicon glyphicon-triangle-bottom',
				expanderCollapsedClass : 'glyphicon glyphicon-triangle-right',
				onChange : function() {
					$table.bootstrapTable('resetWidth');
				}
			});
		}
	});

	//弹窗
	function showModal(id, pId) {
		layer.open({
			type : 2,
			area : [ '500px', '380px' ],
			fix : false, //不固定
			maxmin : true,
			shade : 0.4,
			offset : [ 150 ],
			title : '编辑',
			content : '${pageContext.request.contextPath}/jump_property_resource_edit?id=' + id + '&pId=' + pId,
			btn : [ "保存" ],
			btn1 : function(index, layero) {
				var iframeWin = window[layero.find('iframe')[0]['name']];
				iframeWin.insert();//执行子页面的方法
			}
		});
	}

	function del(id) {
		layer.confirm("是否删除此项？", function(index) {
			$.ajax({
				url : "${pageContext.request.contextPath}/deletePropertyResource",
				type : "post",
				data : {
					id : id
				},
				dataType : "json",
				success : function(data) {
					if (data.result == 1) {
						layer.msg('操作成功!', {
							icon : 1,
							time : 800
						});
						setTimeout(function() {
							$("#table").bootstrapTable('refresh');
						}, 500);
					} else if (data.result == -1) {
						layer.msg('有下级数据，无法删除!', {
							icon : 2,
							time : 800
						});
					} else {
						layer.msg('操作失败!', {
							icon : 2,
							time : 800
						});
					}
				},
				error : function() {
					layer.msg('系统繁忙，请稍后再试!', {
						icon : 5,
						time : 800
					});
				}
			});
		});
	}

	function query() {
		$("#table").bootstrapTable('refresh');
	}
</script>
</html>
